<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<%@ include file="/include/head-master.jsp"%>
<link rel="stylesheet" type="text/css" href="css/seat-map.css">

<script src="js/seat-map.js" type="text/javascript"></script>
<script src="js/seat-map-page.js" type="text/javascript"></script>
<script src="plugins/jscroll-master/jquery.jscroll.min.js"
	type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#searchResult").children().first().addClass('active');
		var seatCode = $("#searchResult").children().first().attr('value');
		$('#' + seatCode).parent().zoomTo({
			targetsize : 1,
			duration : 600,
			root : $('#seat-map-view')
		});

		setTimeout(function() {
			$('#' + seatCode).addClass('selected-seat');
			$('#' + seatCode).popover('show');
		}, 600);

		$("#table-results").kendoGrid({
			pageable : {
				pageSize : 4
			},
			scrollable : false,
			dataBound : function(e) {
				$('.empSeatResult').click(function() {
					$('.seat').removeClass('selected-seat');
					$('.seat').popover('hide');
					var seatCodeResult = $(this).attr('value');
					$('#' + seatCodeResult).parent().zoomTo({
						targetsize : 1,
						duration : 600,
						root : $('#seat-map-view')
					});

					setTimeout(function() {
						$('#' + seatCodeResult).addClass('selected-seat');
						$('#' + seatCodeResult).popover('show');
					}, 600);
				});
				
				$('.empSeatResult').click(function() {
					$('.empSeatResult').removeClass('active');
					$(this).addClass('active');
				});
			}
		});

		//$("#searchResult").children().first().parent().zoomTo({targetsize:1, duration:600, root:$('#seat-map-view')});
		$('.empSeatResult').click(function() {
			$('.seat').removeClass('selected-seat');
			$('.seat').popover('hide');
			var seatCodeResult = $(this).attr('value');
			$('#' + seatCodeResult).parent().zoomTo({
				targetsize : 1,
				duration : 600,
				root : $('#seat-map-view')
			});

			setTimeout(function() {
				$('#' + seatCodeResult).addClass('selected-seat');
				$('#' + seatCodeResult).popover('show');
			}, 600);
		});

		$('.empSeatResult').click(function() {
			$('.empSeatResult').removeClass('active');
			$(this).addClass('active');
		});

	});
</script>

<title>Search Result</title>
</head>
<body>
	<div class="container">
		<%@ include file="/include/header.jsp"%>
		<div class="row">
			<div class="col-md-12">
				<div class="col-md-12">
					<div class="col-md-12" style="margin-bottom: 15px;">
						<p>Search Results for "${searchString}":</p>
					</div>
					<div class="col-md-12">
						<div id="searchResult" class="list-group">
							<c:choose>
								<c:when test="${empty empSeats}">
								No Results Found.
								</c:when>
								<c:otherwise>
									<table id="table-results">
										<thead>
											<tr>
												<th>Results</th>
											</tr>
										</thead>
										<tbody>
											<c:forEach items="${empSeats}" var="empSeat">
												<tr>
													<td><a href="#seatmap-id" class="list-group-item empSeatResult"
														value="${empSeat.seat.seatCode }">${empSeat.employee.lastName },&nbsp;
															${empSeat.employee.firstName } </a></td>
												</tr>
											</c:forEach>
										</tbody>
									</table>
									<%-- 									<c:forEach items="${empSeats}" var="empSeat">
										<a href="#" class="list-group-item empSeatResult"
											value="${empSeat.seat.seatCode }">${empSeat.employee.lastName },&nbsp;
											${empSeat.employee.firstName } </a>
									</c:forEach> --%>
								</c:otherwise>
							</c:choose>
						</div>
					</div>
				</div>
				<div class="col-md-12" id="seatmap-id">
					<%@ include file="/include/seat-map-view.jsp"%>
				</div>
			</div>
		</div>
		<%@ include file="/include/footer.jsp"%>
	</div>
</body>
<c:forEach items="${employeeSeats}" var="empSeat">
	<div class="employee-seat">
		<input type="hidden" value="${empSeat.seat.col}-${empSeat.seat.row}"
			class="coordinate" /> <input type="hidden"
			value="${empSeat.employee.firstName }" class="first-name" /> <input
			type="hidden" value="${empSeat.employee.lastName }" class="last-name" />
		<input type="hidden" value="${empSeat.seat.seatCode }"
			class="seat-code" /> <input type="hidden"
			value="${empSeat.seat.localNo }" class="local-no" /> <input
			type="hidden" value="${empSeat.seat.project.projectCode }"
			class="project-code" />
	</div>
</c:forEach>
</html>

